<template>
    <div class="project">
      <div class="car">
        <div class="history">

            <div class="ul">
                <div class='li'>图片</div>
                <div class='li'>名字</div>
                <div class='li'>数量</div>
             
                <div class='li'>购买时间</div>
                <div class='li'>地点</div>
                <div class='li'>价格</div>
                <div class='li'>备注</div>
                <div class='li'>操作</div>
            </div>
            <div class="ul" v-for="item,i in list" :key='i' >
                <div class='li_item img' >
                  <img  :src="item.img" />
                </div>
                <div class="li_item">
                    {{item.objectname}}
                </div>
                <div class='li_item'>{{item.count}}</div>
                <div class='li_item'>{{item.maturity_time}}</div >
                <div class='li_item'>{{item.place}}</div>
                <div class='li_item'>{{item.price}}</div >
                <div class='li_item'>{{item.remarks}}</div>
                <div class='li_item'>
                  <el-button type="text" @click="deleteItem(item.objectname)">删除</el-button>
                  <el-button type="text" @click="editorItem(item.object_id)">修改</el-button>
                </div>
            </div>
        </div> 
      </div>
      <div class="updateObject" v-if="ifupdate">
        <update :object_id="object_id" @objectConcel="objectConcel"></update>
      </div>
      
    </div>
</template>
  
  <script>
  import update from "../views/update.vue"
  export default {
    name: "searchView",
    components:{
      update
    },
    data(){
        return{
            list:[],
            ifupdate:false,
            object_id:null,
            // {img:'111',objectname:'mihz',place:'111',count:'11',price:'123',remarks:'11332321321dadsfdsnfjdsnfjkshjbsdmngbhamfdgrhhershgerjhgerjhgrjghrj,ghske31232132132131321312312',maturity_time:'2023'}
            
        }
    },
    methods:{
        async init(kind){
          this.list=[]
            console.log("kind",kind)
            const data={
                user_id:localStorage.user_id,
                classfication:kind
            }

            const resp=await this.$http.post("/object/fl_show",data)

        
            for( var i=0;i< resp.data.length;i++){
              console.log("resp",resp.data[i].img)
              this.list.unshift({img:require('../../src/static/object/'+resp.data[i].img),objectname:resp.data[i].objectname,place:resp.data[i].place,count:resp.data[i].count,price:resp.data[i].price,remarks:resp.data[i].remarks,maturity_time:resp.data[i].maturity_time,object_id:resp.data[i].object_id})
            }
        },
        async deleteItem(item){
          let data={
            user_id:localStorage.user_id,
            objectname:item
          }
          const resp=await this.$http.post('/object/delete',data)
          
          if(resp.data.state==true){
            this.$message.success(resp.data.message)
            this.init(this.$route.query.kind)
          }else{
            this.$message.error(resp.data.message)
          }
        },
        editorItem(resp){
          this.ifupdate=true
          console.log("object",resp)
          this.object_id=resp
        },
        objectConcel(){
          this,this.ifupdate=false
        }

    },
    created(){
        this.init(this.$route.query.kind)
        this.list=[]
        
    }
  }
  </script>
  
  <style lang="less" scoped>
  .el-button--text{
    color:rgb(68, 67, 67);
    font-size:20px;
    font-weight:800;
  }
  .updateObject{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    // transform: translateX(-50%);
    // transform: translateY(-50%);
    
    //margin:20px auto;
    // top:30px;
    // left:30%;
  }
  .project {
    background-image: url('../static/background_image/1684459600197.jpg');
    height:100%;
    width:100%;
    box-sizing: border-box;
    padding-top:5%;
  
    .car {
        padding:60px 10px;
      //box-sizing: border-box;
      width: 90%;
      min-width:1800px;
      margin:0 auto;
      border-radius: 16px;
      background-color: rgba(255,255,255,0.3);
      //padding: 60px 0;

      .history {
     // width: 80%;
     padding:0 20px;
      margin: 0 auto;
      border-radius: 16px;
      background-color: rgba(255,255,255,0.3);
      overflow: auto;
      display:flex;
      flex-direction: column;
      justify-content: space-between;

      .ul{
        display:flex;
        flex-direction: row;
        justify-content: left;
        padding:0px;
        .img{
              width:100px;
              height:180px;
              overflow: hidden;
              //padding-bottom:10px;
              margin:10px 10px 10px 0px;
             
              img{
                object-fit: contain;
                width:200px;

              }
          }
        
        .li{
            width:20%;
            font-size: 20px;
            list-style-type: none;
            justify-content: left;
            padding:10px 5px;
            word-wrap:break-word;
            padding: 20px;
        }
        .li_item{
            width:20%;
            font-size: 20px;
            display:flex;
            list-style-type: none;
            justify-content: left;
            align-items: center;
            padding:10px 5px;
            word-wrap:break-word;
            padding: 20px;

        }
      }

    }
     
    }
  }
  </style>
  